<template>
	<view>
		<view class="footer_box" :class="{ footer_bg: bg }">
			<view v-for="(item, index) of navigationList" :key="index" class="footer_item">
				<view v-if="item.raised" class="footer_raised_item" @click="onRaised">
					<view class="footer_raised_item_image">
						<icon-svg class="icon1" :icon-class="item.icon" />
					</view>
				</view>
				<view v-else class="footer_nav_item" 
					@click="onPageJump(item.pagePath,index)">
					<view class="footer_nav_item_image">
						<!-- <icon-svg class="icon3" :icon-class="item.icon" /> -->
							<!-- :class="{icon2: isActiveIndex === index }" -->
						<icon-svg :icon-class="item.icon" 
							:class="isActiveIndex == index ? 'icon2' : 'icon3'" />
					</view>
<!-- 					<view v-else class="footer_nav_item_image">
						<icon-svg class="icon3" :icon-class="item.icon" />
					</view> -->
					<text class="footer_nav_item_text" 
						:class="isActiveIndex == index ? 'activeText' : ''">{{ item.text }}</text>
				</view>
			</view>
		</view>
		<view v-if="bg" class="footer_station"></view>
		<z-popup v-model="popupShow" type="2000">
			<view class="popup_content">
				<Add></Add>
			</view>
		</z-popup>
	</view>
</template>
<script>
import zPopup from './popup';
import Add from '@/pages/add/index'
export default {
	components:{
		zPopup,
		Add
	},
	props: {
		bg: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			path: '',
			isActiveIndex: 0,
			navigationList: [
				{
					"pagePath": "/pages/index/index",
					"icon": "shouye1",
					"text": "首页",
					"id": '0'
				},
				{
					"pagePath": "/pages/report/index",
					"icon": "zhuzhuangtu",
					"text": "报表",
					"id": '1'
				},
				{
					"pagePath": "/pages/add/index",
					"icon": "tianjia",
					"text": "添加",
					raised: true
				},
				{
					"pagePath": "/pages/order/index",
					"icon": "gongwenbao",
					"text": "商旅",
					"id": '3'
				},
				{
					"pagePath": "/pages/mine/index",
					"icon": "weibiaoti2fuzhi12-copy",
					"text": "我的",
					"id": '4'
				}
			],
			popupShow: false,
		};
	},
	//第一次加载
	created() {
		//获取所有页面
		let currentPages = getCurrentPages();
		let page = currentPages[currentPages.length - 1];
		this.path = page.route;
	},
	//方法
	methods: {
		onPageJump(url, index) {
			this.isActiveIndex = index
			setTimeout(()=> {
				uni.switchTab({
					url
				})
			},100)
		},
		onRaised(){
			this.popupShow = true;
		}
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.footer_station {
	height: 110rpx;
}
.footer_box {
	height: 110rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	z-index: 502;
}
.footer_bg {
	background-color: #FFF;
}
.footer_item {
	position: relative;
	flex: 1;
}
.footer_nav_item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.footer_nav_item:active {
	background-color: rgba($color: #fff, $alpha: 0.1);
}
.footer_nav_item_text {
	font-size: 32rpx;
	color: #999999;
	margin-top: 6rpx;
}
.footer_nav_item_text_active {
	color: #f9a633;
}
.footer_nav_item_image {
	width: 50rpx;
	height: 50rpx;
}
.icon3{
	font-size: 24px!important;
	color: #999;
}
.icon2{
	font-size: 24px!important;
	color: $themeColor;
}
.activeText{color: $themeColor;}
.footer_raised_item {
	position: absolute;
	top: -40rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 120rpx;
	height: 120rpx;
	background-color: #FFF;
	border-radius: 50%;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	align-items: center;
	justify-content: center;
}
.footer_raised_item_image {
	width: 70rpx;
	height: 70rpx;
	.icon1{
		font-size: 34px;
		color: $themeColor;
	}
}
.popup_content {
	bottom: 0px;
	width: 100vw;
	height: 60vh;
	background-color: #FeFeFe;
	padding: 30rpx 30rpx 0 30rpx;
	box-sizing: border-box;
	border-top-left-radius:40rpx;
	border-top-right-radius:40rpx;
}
// .footer_item:nth-of-type(1){
// 	.footer_nav_item{
// 		.svg-icon{
// 			color: $themeColor;
// 		}
// 	}
// }
</style>

